<template>
  <div class="container">
    <el-row :gutter="10" class="btns">
      <el-col :span="1.5">
        <el-button
            icon="Upload"
            plain
            type="primary"
            @click="handleUpload"
        >上传
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-select
            v-model="userId"
            placeholder="请选择用户"
        >
          <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
          />
        </el-select>
      </el-col>
    </el-row>
    <el-table border :data="fileList" height="500" :loading="loading">
      <el-table-column align="center" show-overflow-tooltip min-width="120" prop="fileId" label="文件Id"/>
      <el-table-column align="center" show-overflow-tooltip min-width="120" prop="fileName" label="文件名称"/>
      <el-table-column align="center" show-overflow-tooltip min-width="120" prop="originalFileName" label="原文件名称"/>
      <el-table-column align="center" show-overflow-tooltip min-width="120" prop="size" label="文件大小"/>
      <el-table-column align="center" show-overflow-tooltip min-width="120" prop="suffix" label="文件后缀"/>
      <el-table-column align="center" show-overflow-tooltip min-width="120" prop="uploadTime" label="上传时间"/>
      <el-table-column align="center" show-overflow-tooltip min-width="120" prop="uploadUser" label="上传用户"/>
      <el-table-column align="center" show-overflow-tooltip min-width="120" prop="url" label="访问路径"/>
      <el-table-column align="center" show-overflow-tooltip min-width="120" prop="fileKey" label="文件key"/>
      <el-table-column align="center" fixed="right" show-overflow-tooltip min-width="200" label="操作">
        <template #default="scope">
          <el-tooltip content="预览" placement="top">
            <el-button icon="View" link type="primary" @click="handleView(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip content="在线编辑" placement="top">
            <el-button icon="Edit" link type="primary" @click="handleEdit(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button icon="Delete" link type="danger" @click="handleDelete(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        style="float: right;padding-top: 8px;"
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 30, 40, 50]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import {ref} from "vue";
import axios from 'axios'
import {useRoute, useRouter} from "vue-router";
import {ElMessage, ElMessageBox} from 'element-plus'

const loading = ref(false)
const fileList = ref([])
const total = ref(0)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
const router = useRouter();
const route = useRoute();
const userId = ref(null)
const userList = ref([])

const handleSizeChange = (e) => {
  queryParams.value.pageSize = e
  getFileList()
}

const handleCurrentChange = (e) => {
  queryParams.value.pageNum = e
  getFileList()
}

/**
 * 上传
 */
const handleUpload = () => {

}

/**
 * 在线编辑
 * @param row
 */
const handleEdit = (row) => {
  router.push({path: `/file/edit/${row.fileId}`, query: {'userId': userId.value}})
}

/**
 * 预览
 * @param row
 */
const handleView = (row) => {
  router.push({path: `/file/view/${row.fileId}`, query: {'userId': userId.value}})
}

/**
 * 删除
 * @param row
 */
const handleDelete = (row) => {
  ElMessageBox.confirm(
      '是否确认删除该文件',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        axios.delete(`http://192.168.10.168:88/dev-api/file/${row.fileId}`)
            .then(res => {
              ElMessage.success('删除成功')
              getFileList()
            })
      })
      .catch(() => {
      })
}

const getUserList = () => {
  axios.get('http://192.168.10.168:88/dev-api/user')
      .then(res => {
        userList.value = res.data.data
      })
}

/**
 * 获取文件列表
 */
const getFileList = () => {
  loading.value = true
  axios.get('http://192.168.10.168:88/dev-api/file',
      {
        params: queryParams.value
      })
      .then(res => {
        fileList.value = res.data.data.records
        total.value = res.data.data.total
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
}

getFileList()
getUserList()
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  padding: 20px;
}

.btns {
  padding-bottom: 8px;
}
</style>